<template>
  <div class="basic-box">
    <el-form
      :model="alterForm"
      :rules="alterRules"
      v-loading="loading"
      ref="alterInfo"
      size="small"
      label-position="right"
      label-width="auto"
      :disabled="disabled"
    >
      <div class="basic-box-title" v-if="alterForm.changeType === '0' || alterForm.changeType === '1' || alterForm.changeType === '2'">{{ labelData.merchantTitle }}</div>
      <el-row :gutter="20">
        <!-- <el-col :span="8">
          <el-form-item label="门头名称:" prop="rpiName">
            <el-input
              class="haruyuki-width-100"
              type="text"
              v-model="alterForm.rpiName"
              :disabled="isAlterDisabledShow"
              placeholder="请输入门头名称"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8" v-if="alterForm.changeType === '0' || alterForm.changeType === '1' ||(alterForm.changeType === '2' && alterForm.picShow === '1')">
          <el-form-item label="变更申请图片:" prop="changeApplyPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpchangeApplyPicRequest"
              :limit="1"
              :file-list="changeApplyPicList"
              :on-remove="changeApplyPicRemove"
              :before-remove="beforechangeApplyPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="basic-box-title haruyuki-mt-40">{{ labelData.contentTitle }}</div>
      <div v-if="alterForm.rpiNo && alterForm.changeType === '0' && isViewShow">
        <module-basic :basicForm="alterForm.basicDTO" :oldBasicForm="alterForm.oldBasicDTO" :disabled="disabled" ref="toBasicForm"></module-basic>
      </div>
      <div v-if="alterForm.rpiNo && alterForm.changeType === '1' && isViewShow">
        <module-card :cardForm="alterForm.cardDTO" :oldCardForm="alterForm.oldCardDTO" :disabled="disabled" ref="toCardForm"></module-card>
      </div>
      <div v-if="alterForm.rpiNo && alterForm.changeType === '2' && isViewShow">
        <module-rate :rateForm.sync="alterForm.rateDTO.vo[0]" :rateArray="alterForm.rateArray" :disabled="disabled" ref="toRateForm"></module-rate>
      </div>
      <div v-if="alterForm.rpiNo && alterForm.changeType === '3' && isViewShow">
        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="8">
            <el-form-item label="原登录账户:" prop="oldAccount">
              <span>{{ alterForm.oldAccount }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="8">
            <el-form-item label="变更后登录:" prop="account">
              <el-input
                class="haruyuki-width-100"
                type="text"
                v-model="alterForm.account"
                placeholder="请输入新账户"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20" v-if="alterForm.rpiNo && alterForm.changeType === '0' || alterForm.changeType === '1' || alterForm.changeType === '2' && isViewShow">
        <el-col :span="24">
          <el-form-item label="备注:" label-width="50px" prop="changeRemark">
            <el-input
              type="textarea"
              v-model="alterForm.changeRemark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="alterForm.rpiNo && alterForm.changeType === '4' && isViewShow">
        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="8">
            <el-form-item label="变更前内容:">
              <span>{{ alterForm.merChangeSettleDto.settleName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="8">
            <el-form-item label="变更后内容:" prop="merChangeSettleDto.changeSettleFlag">
              <el-select v-model="alterForm.merChangeSettleDto.changeSettleFlag" placeholder="请选择" @change="merSetChange" >
                <el-option  v-for="item in alterForm.merChangeSettleDto.settleList" :key="item.changeSettleFlag" :label="item.changeSettleName" :value="item.changeSettleFlag">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import {
  // getDetail,
  getDetailRecord,
  getDetailFlowPlus,
} from "@/api/rb-service/merrecord/mer_change_record";
import {
//   getFirstBankList,
  getSecondBankList,
} from "@/api/rb-service/posinfo/pos_info";
// import { queryBasicAisleList } from "@/api/rb-service/posinfo/pos_info_details";
// import { getMccIndustryList, getMccList } from "@/api/rb-service/posinfo/pos_info";
import { getDictionary } from "@/api/system/dict";
import { uploadPrivate } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';
import moduleBasic from "./module_basic";
import moduleCard from "./module_card";
import moduleRate from "./module_rate";


export default {
  mixins: [canvasImg],
  props: {
    isAlterDisabledShow: {
      type: Boolean,
      default: false,
    },
    isBeforeAlter: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    rpiNo: {
      type: String,
      default: '',
    },
    changeType: {
      type: String,
      default: '',
    },
    aisleCode: {
      type: String,
      default: '',
    },
    changeNo: {
      type: String,
      default: '',
    },
    rateType: {
      type: String,
      default: '',
    },
  },
  components: {
    moduleBasic,
    moduleCard,
    moduleRate
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      data: [],
      labelData: {
        merchantTitle: "商户信息",
        contentTitle: "",
      },
      process: {},
      isViewShow: false,
      loading: false,
      aisleList: [],
      alterForm: {
        rpiNo: '',
        rpiName: '',
        changeType: '',
        changeCode: '',
        changeApplyPic: '',
        account: ''
      },
      alterRules: {
        rpiNo: [{ required: true, message: "请输入商户号", trigger: "blur" }],
        rpiName: [
          { required: true, message: "请输入门头名称", trigger: "blur" },
        ],
        changeType: [
          { required: true, message: "请选择变更类型", trigger: "blur" },
        ],
        changeApplyPic: [
          { required: true, message: "请上传变更申请图片", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入登录账户", trigger: "blur" },
        ],
        "merChangeSettleDto.changeSettleFlag":[
          { required: true, message: "请选择变更后内容", trigger: ["blur",'change'] },
        ]
      },
      changeTypeOptions: [],
      ysMerchantKeyOptions: [],
      industryCodeOptions: [],
      mccCdOptions: [],
      balanceAccTypeOptions: [],
      provinceCityAreaOptions: [],
      bankNameOptions: [],
      accBankNameOptions: [],
      changeApplyPicList: [],
      accountFrontList: [],
      accountReverseList: [],
      // openPermitList: [],
      // ecardFrontList: [],
      // ecardReverseList: [],
      isShow: true,
    };
  },
  computed: {
    // merchantMccType() {
    //   console.log(this.alterForm, 'this.alterForm');
    //   const { userType, ysMerchantKey } = this.alterForm.basicDTO;
    //   return {
    //     userType,
    //     ysMerchantKey
    //   }
    // }
  },
  watch: {
    "data.changeType"(value) {
      this.alterForm = this.data;
      if (value == "0") {
        this.labelData.contentTitle = '基本信息变更';
        this.alterForm = this.data;
        this.$nextTick(()=>{
          // if (this.alterForm.basicDTO.legalPersonIdEdate == '2999-12-31 00:00:00') { //法人信息 法人身份证截止日期
          //   this.$refs["toBasicForm"].legalPersonIdEdateChecked = true;
          // }
          // if (this.alterForm.basicDTO.businessLicenceEDate == '2999-12-31 00:00:00') { //企业信息 营业执照截止日期
          //   this.$refs["toBasicForm"].businessLicenceEDateChecked = true;
          // }
          // if (this.alterForm.basicDTO.idValiddateEnd == '2999-12-31 00:00:00') { //联系人 身份证截止日期
          //   this.$refs["toBasicForm"].idValiddateEndChecked = true;
          // }
          this.$refs["toBasicForm"].roaLicenseFileList.push({
            url: this.alterForm.basicDTO.licensePicUrl || "",
          });
          this.$refs["toBasicForm"].handHeldList.push({
            url: this.alterForm.basicDTO.handHeldUrl || "",
          });
          this.$refs["toBasicForm"].cardFrontList.push({
            url: this.alterForm.basicDTO.cardFrontUrl || "",
          });
          this.$refs["toBasicForm"].cardReverseList.push({
            url: this.alterForm.basicDTO.cardReverseUrl || "",
          });
          this.$refs["toBasicForm"].authLetterPicList.push({
            url: this.alterForm.basicDTO.authLetterPicUrl || "",
          });
          this.$refs["toBasicForm"].contactFrontPicList.push({
            url: this.alterForm.basicDTO.contactFrontPicUrl || "",
          });
          this.$refs["toBasicForm"].contactReversePicList.push({
            url: this.alterForm.basicDTO.contactReversePicUrl || "",
          });
        })
      } else if (value == "1") {
        this.labelData.contentTitle = '银行卡变更';
      } else if (value == "2") {
        this.labelData.contentTitle = '费率变更';
      } else if (value == "3") {
        this.labelData.contentTitle = '账户变更';
      } else if (value == "4") {
        this.labelData.contentTitle = '清算周期变更';
      }
    },
  },
  created() {
    this.doGetDicts();
    if (this.rpiNo) {
      this.getMerhchantDetails(this.rpiNo, this.changeType, this.aisleCode);
    } else if (this.changeNo) {
      this.getMerhchantDetailPlus(this.changeNo);
    }
  },
  methods: {
    /* DO 选择 */
    merSetChange(e){
      const index = this.alterForm.merChangeSettleDto.settleList.findIndex(obj => obj.changeSettleFlag === e);
      this.alterForm.merChangeSettleDto.changeSettleName = this.alterForm.merChangeSettleDto.settleList[index].changeSettleName;
    },
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "change_type" }).then((res) => {
        this.changeTypeOptions = res.data.data;
      });
      getDictionary({ code: "balance_acc_type" }).then((res) => {
        this.balanceAccTypeOptions = res.data.data;
      });
    //   getFirstBankList("-1", "-1").then((res) => {
    //     this.bankNameOptions = res.data.data.records;
    //   });
      // this.getMccMerchantKey();
    },
    /* 获取通道列表数据 */
    // getAisleInfo() {
    //   const _this = this;
    //   queryBasicAisleList(_this.alterForm.rpiNo).then((res) => {
    //     _this.aisleList = res.data.data;
    //   });
    // },
    /* 通过商户号以及变更类型 获取商户信息 */
    getMerhchantDetails(rpiNo, changeType, aisleCode) {
      this.isViewShow = false;
      this.loading = true;
      let param = {rpiNo, changeType, aisleCode};
      if(this.rateType){
        param.rateType = this.rateType
      }
      getDetailRecord(param).then(
        (res) => {
          this.data = res.data.data;
            if (this.data.changeType == "0") {
              this.data.basicDTO.legalProvinceCityArea = [
                this.data.basicDTO.legalProvince,
                this.data.basicDTO.legalCity,
                this.data.basicDTO.legalArea,
              ];
              this.data.basicDTO.mercProvinceCityArea = [
                this.data.basicDTO.mercProvCode,
                this.data.basicDTO.mercCityCode,
                this.data.basicDTO.mercAreaCode,
              ];
              this.data.basicDTO.accProvinceCityArea = [
                this.data.basicDTO.openAccProvinceCode,
                this.data.basicDTO.openAccCityCode,
                this.data.basicDTO.openAccAreaCode,
              ];
            } else if (this.data.changeType == "1") {
              this.data.cardDTO.accProvinceCityArea = [
                this.data.cardDTO.openAccProvinceCode,
                this.data.cardDTO.openAccCityCode,
                this.data.cardDTO.openAccAreaCode,
              ];
            } else if (this.data.changeType == "4") {
              this.data.merChangeSettleDto = JSON.parse(JSON.stringify(this.data.oldMerChangeSettleDto))
            }
          
          this.isViewShow = true;
          this.loading = false;
        },
        (error) => {
          this.loading = false;
          this.isViewShow = false;
          window.console.log(error);
        }
      );
    },
    /* 通过changeNo 获取商户信息 */
    getMerhchantDetailPlus(changeNo) {
      this.isViewShow = false;
      this.loading = true;
      getDetailFlowPlus(changeNo).then(
        (res) => {
          this.data = res.data.data;
          this.$emit('getDetailReject', this.data.comment);
          this.changeApplyPicList.length == 0 && this.data.changeApplyPicUrl ? this.changeApplyPicList.push({url: this.data.changeApplyPicUrl || ""}) : this.changeApplyPicList;
          if (this.data.changeType == "0") {
            this.data.basicDTO.legalProvinceCityArea = [
              this.data.basicDTO.legalProvince,
              this.data.basicDTO.legalCity,
              this.data.basicDTO.legalArea,
            ];
            this.data.basicDTO.mercProvinceCityArea = [
              this.data.basicDTO.mercProvCode,
              this.data.basicDTO.mercCityCode,
              this.data.basicDTO.mercAreaCode,
            ];
            this.data.basicDTO.accProvinceCityArea = [
              this.data.basicDTO.openAccProvinceCode,
              this.data.basicDTO.openAccCityCode,
              this.data.basicDTO.openAccAreaCode,
            ];
          } else if (this.data.changeType == "1") {
            this.data.cardDTO.accProvinceCityArea = [
              this.data.cardDTO.openAccProvinceCode,
              this.data.cardDTO.openAccCityCode,
              this.data.cardDTO.openAccAreaCode,
            ];
          } else if (this.data.changeType == "4") {
            this.data.merChangeSettleDto = JSON.parse(JSON.stringify(this.data.oldMerChangeSettleDto))
          }
          
          this.isViewShow = true;
          this.loading = false;
        },
        (error) => {
          this.loading = false;
          this.isViewShow = false;
          window.console.log(error);
        }
      );
    },
    /* 通过id 获取商户信息 */
    getMerhchantDetailPlusX(changeNo) {
      this.loading = true;
      getDetailFlowPlus(changeNo).then(
        (res) => {
          this.alterForm = res.data.data;
          this.isViewShow = true;
          this.loading = false;
          this.changeApplyPicList.length == 0 && this.alterForm.changeApplyPicUrl ? this.changeApplyPicList.push({url: this.alterForm.changeApplyPicUrl || ""}) : this.changeApplyPicList;
          // this.$emit('getDetailReject', res.data.data.links);
          if (this.alterForm.changeType == "1") {
            this.alterForm.cardDTO.accProvinceCityArea = [
              this.alterForm.cardDTO.openAccProvinceCode,
              this.alterForm.cardDTO.openAccCityCode,
              this.alterForm.cardDTO.openAccAreaCode,
            ];
            if (this.alterForm.cardDTO.balanceAccType == "3" || this.alterForm.cardDTO.balanceAccType == "11") {
              this.accountFrontList.length == 0 && this.alterForm.cardDTO.accountFrontUrl ? this.accountFrontList.push({url: this.alterForm.cardDTO.accountFrontUrl || ""}) : this.accountFrontList;
              this.accountReverseList.length == 0 && this.alterForm.cardDTO.accountReverseUrl ? this.accountReverseList.push({url: this.alterForm.cardDTO.accountReverseUrl || ""}) : this.accountReverseList;
            }
            // if (this.alterForm.cardDTO.balanceAccType == "3") {
            //   this.ecardFrontList.length == 0 && this.alterForm.cardDTO.ecardFrontUrl ? this.ecardFrontList.push({url: this.alterForm.cardDTO.ecardFrontUrl || ""}) : this.ecardFrontList;
            //   this.ecardReverseList.length == 0 && this.alterForm.cardDTO.ecardReverseUrl ? this.ecardReverseList.push({url: this.alterForm.cardDTO.ecardReverseUrl || ""}) : this.ecardReverseList;
            // }
            // if (this.alterForm.cardDTO.balanceAccType == "21") {
            //   this.openPermitList.length == 0 && this.alterForm.cardDTO.openPermitUrl ? this.openPermitList.push({url: this.alterForm.cardDTO.openPermitUrl || ""}) : this.openPermitList;
            // }
            getSecondBankList(
              "-1",
              "-1",
              this.alterForm.cardDTO.openAccCityCode,
              this.alterForm.cardDTO.bankType
            ).then((res) => {
              this.accBankNameOptions = res.data.data.records;
            });
          }
          this.$emit('getDetailReject', res.data.data.comment);
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    // /* 商户号 */
    // rpiNoChange(e) {
    //   this.getAisleInfo();
    //   if (e && this.alterForm.changeType && this.alterForm.aisleCode) {
    //     this.getMerhchantDetails(e, this.alterForm.changeType, this.alterForm.aisleCode);
    //   }
    // },
    // /* 变更类型 */
    // alterChange(e) {
    //   this.labelData.contentTitle = this.changeTypeOptions[e].dictValue;
    //   if (e && this.alterForm.rpiNo && this.alterForm.aisleCode) {
    //     this.getMerhchantDetails(this.alterForm.rpiNo, e, this.alterForm.aisleCode);
    //   } else if (e == '3' && this.alterForm.rpiNo) {
    //     this.getMerhchantDetails(this.alterForm.rpiNo, e);
    //   }
    // },
    // /* 通道选择 */
    // aisleChange(e) {
    //   if (e && this.alterForm.rpiNo && this.alterForm.changeType) {
    //     this.getMerhchantDetails(this.alterForm.rpiNo, this.alterForm.changeType, e);
    //   }
    // },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 变更申请图片上传 */
    httpchangeApplyPicRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.changeApplyPic = res.data.data.name;
        this.$refs.alterInfo.validateField("changeApplyPic");
      });
    },
    /* 变更申请图片删除 */
    changeApplyPicRemove(file, fileList) {
      this.changeApplyPicList = fileList;
      this.alterForm.changeApplyPic = "";
    },
    beforechangeApplyPicRemove() {
      return this.$confirm(`确定移除变更申请图片？`);
    }
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  // padding: 20px 40px 20px 0;
  padding: 20px;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}

.alter-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
}

.upload-img {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>